<template>
  <div id="guestbook">
    <div class="title">
      <h3>留言板</h3>
      <span style="font-weight: 500">首先感谢你的来访，你的留言就是最好的支持！</span>
      <p>原则上畅所欲言，但是恶意中伤、垃圾广告或者不文明言语等会进黑名单哦~</p>
      <p>留言没有及时显示，可能是缓存或者还没有审核（完全尊重你的留言，只是怕被恶意和谐了）。</p>
      <p>欢迎提出任何疑问和建议，原则上会解答合理疑问和采纳合理建议，但是超出我的水平或技术栈就没办法了。</p>
      <p>期待你的再次光临，并欢迎
        <router-link :to="{path: '/link'}" class="link">交换友链</router-link>
        。
      </p>
    </div>

    <Comment :type="title" :comments="commentList" @getCommentList="getCommentList"/>
  </div>
</template>

<script>
  import Comment from '../../components/Comment'

  export default {
    name: "guestbook.vue",
    components: {
      Comment
    },
    data() {
      return {
        title: '留言',
        commentList: [],
      }
    },
    methods: {
      async getCommentList(page) {
        let data = {
          page: page || 1,
        }
        // this.commentList = await this.$api.commentList(this.$common.filterParam(data))
        this.commentList = {"list":[],"pagination":{"page":1,"size":0,"total":0}}
      },
    },
    mounted() {
      this.getCommentList()
    },
  }
</script>

<style scoped>
  #guestbook {
    text-align: left;
  }

  .title {
    padding: 10px 20px;
  }

  .link {
    color: #409EFF;
  }

</style>
